<template>
  <div class="vlonProjectBg" v-if="oItem">
    <RadioComponent
      :item="oItem"
      :controlsIndex="controlsIndex"
      :rightIndex="rightIndex"
      :catalogIndex="catalogIndex"
      :controlid="controlid"
      @updateSingleRadioGroup="updateSingleRadioGroup"
    ></RadioComponent>

    <div class="setBgColor" v-if="oItem.value == 'color'">
      <ColorComponent
        :item="oItem.options[1].catalog"
        :controlsIndex="controlsIndex"
        :rightIndex="rightIndex"
        :catalogIndex="catalogIndex"
        :controlid="controlid"
        @updateProjectWrapperBgColor="updateProjectWrapperBgColor"
      ></ColorComponent>
    </div>

    <div class="setBgImg" v-if="oItem.value == 'img'">
      <ChooseImageComponent
        controlName="chooseSingleImg"
        :item="oItem.options[2].catalog"
        :controlsIndex="controlsIndex"
        :rightIndex="rightIndex"
        :catalogIndex="catalogIndex"
        :controlid="controlid"
        @chooseSingleImgAfterUpdateParent="chooseSingleImgAfterUpdateParent"
      ></ChooseImageComponent>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Bus from "@/utils/bus";
import RadioComponent from "../lone/radioComponent.vue";
import ColorComponent from "../lone/colorComponent.vue";
import ChooseImageComponent from "../lone/chooseImageComponent.vue";
export default {
  name: "VlonProjectBg",
  data() {
    return {
      oItem: null,
    };
  },
  created() {},
  props: ["controlsIndex", "rightIndex", "catalogIndex", "controlid"],
  components: { RadioComponent, ColorComponent, ChooseImageComponent },
  mounted() {
    this.$nextTick(() => {
      this.init();
      setTimeout(() => {
        this.initFlag = false;
      }, 1000);
    });
    this.controlid && Bus.$off(`updateRightChild${this.controlid}`);
    this.controlid &&
      Bus.$on(`updateRightChild${this.controlid}`, (param) => {
        // if (this.controlsIndex == param.controlsIndex) {
        this.$nextTick(() => {
          this.init();
        });
        // }
      });
  },
  methods: {
    init(cb) {
      if (this.decorate.controls[this.controlsIndex]) {
        this.oItem = JSON.parse(
          JSON.stringify(
            this.decorate.controls[this.controlsIndex].right[this.rightIndex]
              .catalog[this.catalogIndex]
          )
        );
        if (this.oItem.default) {
          this.color = "#" + this.oItem.default;
          this.color16 = this.oItem.default.toUpperCase();
          if (cb) {
            cb();
          }
        }
      }
    },
    //选择 radio
    updateSingleRadioGroup(radio) {
      this.oItem.value = radio;
      let controls = this.decorate.controls;
      if (radio === "transparent") {
        controls[this.controlsIndex].right[this.rightIndex].catalog[
          this.catalogIndex
        ].options[1].catalog.value = "#FFFFFF";
        controls[this.controlsIndex].main.projectWrapperBgColor = "";
        controls[this.controlsIndex].right[this.rightIndex].catalog[
          this.catalogIndex
        ].options[2].catalog.value = "";
        controls[this.controlsIndex].main.projectWrapperBgImg = "";
      }
      if (radio === "color") {
        controls[this.controlsIndex].right[this.rightIndex].catalog[
          this.catalogIndex
        ].options[2].catalog.value = "";
        controls[this.controlsIndex].main.projectWrapperBgImg = "";
        if (
          this.oItem.options[1].catalog.value !==
          controls[this.controlsIndex].right[this.rightIndex].catalog[
            this.catalogIndex
          ].options[1].catalog.default
        ) {
          controls[this.controlsIndex].right[this.rightIndex].catalog[
            this.catalogIndex
          ].options[1].catalog.value = this.oItem.options[1].catalog.value;
          controls[this.controlsIndex].main.projectWrapperBgColor =
            this.oItem.options[1].catalog.value;
        }
      }
      if (radio === "img") {
        controls[this.controlsIndex].right[this.rightIndex].catalog[
          this.catalogIndex
        ].options[1].catalog.value = "#FFFFFF";
        controls[this.controlsIndex].main.projectWrapperBgColor = "";
      }
      controls[this.controlsIndex].right[this.rightIndex].catalog[
        this.catalogIndex
      ].value = radio;
      controls[this.controlsIndex].main.projectBgStyle = radio;
      this.$store.dispatch("controls", controls);
      Bus.$emit(`updateMainChild${this.controlid}`);
      Bus.$emit(`updateRightChild${this.controlid}`);
     Bus.$emit(`updateRight${this.controlid}`);
    },
    //选择颜色
    updateProjectWrapperBgColor(color) {
      this.oItem.options[1].catalog.value = color;
      let controls = this.decorate.controls;
      controls[this.controlsIndex].right[this.rightIndex].catalog[
        this.catalogIndex
      ].options[1].catalog.value = color;
      controls[this.controlsIndex].main.projectWrapperBgColor = color;
      this.$store.dispatch("controls", controls);
      Bus.$emit(`updateMainChild${this.controlid}`);
      Bus.$emit(`updateRightChild${this.controlid}`);
     Bus.$emit(`updateRight${this.controlid}`);
    },
    //选择图片
    chooseSingleImgAfterUpdateParent(param) {
      this.oItem.options[2].catalog.value = param.url;
      let controls = this.decorate.controls;
      controls[this.controlsIndex].right[this.rightIndex].catalog[
        this.catalogIndex
      ].options[2].catalog.value = param.url;
      controls[this.controlsIndex].main.projectWrapperBgImg = param.url;
      this.$store.dispatch("controls", controls);
      Bus.$emit(`updateMainChild${this.controlid}`);
      Bus.$emit(`updateRightChild${this.controlid}`);
     Bus.$emit(`updateRight${this.controlid}`);
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.vlonProjectBg {
  .setBgColor {
    background: #f4f6f8;
    margin-left: 100px;
    padding: 15px 0;
  }
  .setBgImg {
    background: #f4f6f8;
    margin-left: 100px;
    padding: 15px 0;
  }
}
</style>